<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <!-- Meta, title, CSS, favicons, etc. -->
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description" content="avalonjs - 迷你简单易用的前端MVVM框架，让你的网站更快更炫更好用">
        <meta name="keywords" content="MVVM, CSS, JavaScript, framework, avalon, web development">
        <meta name="author" content="RubyLouvre,司徒正美">


        <title>avalon中文文档</title>
        <script src="//files.cnblogs.com/files/rubylouvre/avalon.shim.js"></script>

        <!-- Bootstrap core CSS -->
        <link href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">

        <link href="../../assets/css/patch.css" rel="stylesheet">

        <!-- Documentation extras -->

        <link href="../../assets/css/docs.min.css" rel="stylesheet">
        <style>
            body,html{
               overflow-y: hidden;
            }
        </style>
        <!--[if lt IE 9]><script src="../assets/js/ie8-responsive-file-warning.js"></script>
        <script src="../../assets/js/ie-emulation-modes-warning.js"></script>
        <![endif]-->
        <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
        <!--[if lt IE 9]>
          <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
          <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->

        <!-- Favicons -->
        <link rel="apple-touch-icon" href="/apple-touch-icon.png">
        <link rel="icon" href="/favicon.ico">

    </head>
    <body>




        <div class="container bs-docs-container">

            <div class="row">
                <div class="col-md-9" role="main">

<h2>avalon自带加载器</h2>
<div ms-include-src="{{userLanguage}}/engineering/loader.menu.html" data-include-replace="true">
    
</div>
<p>一般而言， 我们只在页面上引入一个JS文件，不用说那个JS文件就是avalon.js。然后在对应的script标签上定义一个data-main属性，
    值为一个入口文件的路径。<strong style="color:red">注意，它不能使用.js扩展名</strong>。</p>
<pre class="brush:html;gutter:false;toolbar:false;">
&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;title&gt;avalon.js&lt;/title&gt;
        &lt;meta charset="UTF-8"&gt;
        &lt;meta name="viewport" content="width=device-width"&gt;
        &lt;script src="avalon.js" data-main="js/main"&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;div&gt;TODO write content&lt;/div&gt;
    &lt;/body&gt;
&lt;/html&gt;
</pre>
<p>比如上面的入口文件应为js/main.js，它是放在avalon.js所在目录的js子目录下。</p>
<p>入口文件主要做两件事，使用require.config进行配置，使用require加载你的业务代码。</p>
<p><strong>main.js</strong></p>
<pre class="brush:javascript;gutter:false;toolbar:false">
require.config({
    baseUrl: "js", 
    paths: {
        jquery: 'js/jQuery/jquery-1.12' //jQuery目录是放置各种jQuery的版本及其插件的
    }
})
//html与js与style是位于同一目录，
//js是放置JS模块及组件，
//html是放置同名模块对应的模板，
//style是放置同名模块对应的样式
//当然这只是其中一种组织形式
require(["./aaa", "text!../html/aaa.html", "css!../style/aaa","jquery"], function(a, b, c, d) {
    //.....
})
</pre>
<p>最后是各个JS模块，以define方法进行定义了。注意，define方法有三个参数，第一个参数是模块ID，通常不用写， 在打包时，r.js会根据它与baseUrl的位置
    算出其可用的模块ID名。第二个参数是依赖列表，./, ../应该是相对于其父模块进行设置。第三个是fatory函数，亦即模块本身。
</p>
<p>总结一下，加载器的三个核心API的定义与使用顺序为 require.config --> require --> define。</p>

</div>
<div class="col-md-3" role="complementary">

</div>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script src="../../assets/highlight/shCore.js"></script>

<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>

